<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item :label="$t('排序序号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
              <a-input-number v-model="model.sort" :placeholder="$t('请输入排序序号')" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('名称')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
              <a-input v-model="model.title" :placeholder="$t('请输入名称')"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              :label="$t('活动时间')"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              required
              style="margin-bottom: 0"
            >
              <a-row>
                <a-col :span="10">
                  <a-form-model-item prop="beginTime">
                    <a-date-picker
                      :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                      :placeholder="$t('请选择开始时间')"
                      :disabled="disabled"
                      valueFormat="YYYY-MM-DD HH:mm:ss"
                      v-model="model.beginTime"
                      style="width: 100%"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="1" style="text-align: center"
                  ><span>~</span></a-col
                >
                <a-col :span="10">
                  <a-form-model-item prop="endTime">
                    <a-date-picker
                      :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
                      :placeholder="$t('请选择结束时间')"
                      :disabled="disabled"
                      valueFormat="YYYY-MM-DD HH:mm:ss"
                      v-model="model.endTime"
                      style="width: 100%"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="3">
                  <a-button type="primary" @click="setLongTime">{{ $t('不限期') }}</a-button>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('状态')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
              <j-dict-select-tag type="list" v-model="model.status" dictCode="oc" :placeholder="$t('请选择状态')" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label="$t('公告内容')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content">
              <a-input v-model="model.content" :placeholder="$t('请输入')"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import moment from 'moment'
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'

export default {
  name: 'BisAppletSysForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      moment,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        sort: [{ required: true, message: this.$t('请输入排序序号') }],
        title: [{ required: true, message: this.$t('请输入名称') }],
        beginTime: [{ required: true, message: this.$t('请选择开始时间') }],
        endTime: [{ required: true, message: this.$t('请选择结束时间') }],
        status: [{ required: true, message: this.$t('请输入状态') }],
        content: [{ required: true, message: this.$t('请输入') }],
      },
      url: {
        add: '/applet/bisAppletSysAnnouncement/add',
        edit: '/applet/bisAppletSysAnnouncement/edit',
        queryById: '/applet/bisAppletSysAnnouncement/queryById',
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  methods: {
    setLongTime() {
      this.$set(this.model, 'beginTime', moment().format('YYYY-MM-DD 00:00:00'))
      this.$set(this.model, 'endTime', moment('2099-12-31 23:59:59').format('YYYY-MM-DD 23:59:59'))
      this.$refs.form.validateField('beginTime')
      this.$refs.form.validateField('endTime')
    },
    add() {
      this.getSort()
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    submitForm() {
      let that = this
      // 触发表单验证
      that.$refs.form.validate((valid) => {
        if (valid) {
          if (moment(that.model.beginTime) >= moment(that.model.endTime)) {
            that.$message.warning(that.$t('开始时间需小于结束时间'))
            return
          }
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!that.model.id) {
            httpurl += that.url.add
            method = 'post'
          } else {
            httpurl += that.url.edit
            method = 'put'
          }
          httpAction(httpurl, that.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    getSort() {
      getAction('/applet/bisAppletSysAnnouncement/list', { column: 'sort', order: 'desc', type: 1 }).then((res) => {
        if (res.success) {
          if (res.result.records.length > 0) {
            this.$set(this.modelDefault, 'sort', res.result.records[0].sort + 1)
          } else {
            this.$set(this.modelDefault, 'sort', 1)
          }
          this.edit(this.modelDefault)
        }
      })
    },
  },
}
</script>